Frontend Performance API: Navigeerimis- ja ressursiaja mõõtmise valdamine

Tänapäeva digitaalses maailmas on veebisaidi jõudlus ülimalt oluline. Aeglane veebisait võib põhjustada pettunud kasutajaid, suuremaid põrkemäärasid ja lõppkokkuvõttes kaotatud tulu. Frontend Performance API pakub võimsaid tööriistu teie veebisaidi jõudluse erinevate aspektide mõõtmiseks ja analüüsimiseks, võimaldades teil tuvastada kitsaskohti ning optimeerida kiirema ja reageerivama kasutajakogemuse saavutamiseks. See põhjalik juhend uurib navigeerimis- ja ressursiaja mõõtmise API-sid, pakkudes praktilisi näiteid ja rakendatavaid teadmisi arendajatele üle maailma.

Jõudluse jälgimise vajalikkuse mõistmine

Enne API spetsiifikasse süvenemist mõistame, miks on jõudluse jälgimine ülioluline:

• Kasutajakogemus: Kiire veebisait tagab parema kasutajakogemuse, suurendades kasutajate rahulolu ja kaasatust.
• Otsingumootoritele optimeerimine (SEO): Otsingumootorid nagu Google arvestavad veebisaidi kiirust järjestusfaktorina.
• Konversioonimäärad: Kiirematel veebisaitidel on sageli kõrgemad konversioonimäärad. Kasutajad sooritavad tõenäolisemalt ostu või registreeruvad teenusele, kui veebisait on reageeriv.
• Mobiilijõudlus: Mobiilseadmete kasvava kasutuse tõttu on mobiilijõudluse optimeerimine hädavajalik.
• Globaalne ulatus: Kasutajad erinevatest maailma paikadest võivad kogeda erinevaid võrgutingimusi. Jõudluse jälgimine aitab tagada ühtlase kogemuse kõigile kasutajatele, sõltumata nende asukohast.

Sissejuhatus Frontend Performance API-sse

Frontend Performance API on JavaScripti liideste kogum, mis pakub juurdepääsu veebilehe üksikasjalikele jõudlusmõõdikutele. See võimaldab arendajatel mõõta aega, mis kulub lehe laadimiseks, ressursside toomiseks ja sündmuste töötlemiseks. Seda teavet saab kasutada jõudluse kitsaskohtade tuvastamiseks ja veebisaidi optimeerimiseks parema kasutajakogemuse saavutamiseks.

Põhiliides on Performance, millele pääseb ligi window.performance kaudu. See liides pakub meetodeid ja omadusi erinevate jõudlusega seotud andmete kättesaamiseks.

Navigation Timing API: Lehe laadimisjõudluse mõõtmine

Navigation Timing API pakub üksikasjalikku ajastusteavet lehe laadimisprotsessi erinevate etappide kohta. See võimaldab teil täpselt kindlaks teha, kus viivitused tekivad, ja suunata oma optimeerimispingutused vastavalt sellele.

Navigeerimisaja mõõtmise peamised mõõdikud

• navigationStart: Ajatempel, millal brauser alustab lehe laadimist.
• unloadEventStart: Ajatempel, millal eelmise lehe unload-sündmus algab.
• unloadEventEnd: Ajatempel, millal eelmise lehe unload-sündmus lõpeb.
• redirectStart: Ajatempel, millal ümbersuunamine algab.
• redirectEnd: Ajatempel, millal ümbersuunamine lõpeb.
• fetchStart: Ajatempel, millal brauser alustab dokumendi toomist.
• domainLookupStart: Ajatempel, millal domeeninime otsing algab.
• domainLookupEnd: Ajatempel, millal domeeninime otsing lõpeb.
• connectStart: Ajatempel, millal brauser alustab ühenduse loomist serveriga.
• connectEnd: Ajatempel, millal brauser lõpetab ühenduse loomise serveriga.
• secureConnectionStart: Ajatempel, millal brauser alustab turvalise ühenduse kätlust.
• requestStart: Ajatempel, millal brauser alustab dokumendi pärimist serverist.
• responseStart: Ajatempel, millal brauser saab kätte vastuse esimese baidi serverist.
• responseEnd: Ajatempel, millal brauser lõpetab vastuse kättesaamise serverist.
• domLoading: Ajatempel, millal brauser alustab HTML-dokumendi parsimist.
• domInteractive: Ajatempel, millal brauser lõpetab HTML-dokumendi parsimise ja DOM on valmis.
• domContentLoadedEventStart: Ajatempel, millal DOMContentLoaded-sündmus algab.
• domContentLoadedEventEnd: Ajatempel, millal DOMContentLoaded-sündmus lõpeb.
• domComplete: Ajatempel, millal brauser lõpetab HTML-dokumendi parsimise ja kõik ressursid on laaditud.
• loadEventStart: Ajatempel, millal load-sündmus algab.
• loadEventEnd: Ajatempel, millal load-sündmus lõpeb.

Juurdepääs navigeerimisaja andmetele

Navigeerimisaja andmetele pääseb ligi omaduse performance.timing kaudu:

            
const navigationTiming = performance.timing;

console.log('Navigeerimise algus:', navigationTiming.navigationStart);
console.log('Domeeni otsingu aeg:', navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart);
console.log('Ühenduse aeg:', navigationTiming.connectEnd - navigationTiming.connectStart);
console.log('Vastuse aeg:', navigationTiming.responseEnd - navigationTiming.responseStart);
console.log('DOM interaktiivne:', navigationTiming.domInteractive - navigationTiming.navigationStart);
console.log('DOM valmis:', navigationTiming.domComplete - navigationTiming.navigationStart);
console.log('Laadimisaeg:', navigationTiming.loadEventEnd - navigationTiming.navigationStart);

            

              
                Copy
              
            
          

Navigeerimisaja andmete tõlgendamine

Navigeerimisaja andmete analüüsimine võib anda väärtuslikku teavet teie veebisaidi jõudluse kohta. Näiteks:

• Pikk DNS-i otsingu aeg: Viitab võimalikele probleemidele teie DNS-i pakkujaga või aeglasele DNS-i lahendamisele.
• Pikk ühenduse loomise aeg: Viitab probleemidele teie serveri võrguühenduvusega või aeglasele TLS-kätlusele.
• Pikk vastuseaeg: Viitab aeglasele serveripoolsele töötlemisele või suurtele vastuse mahtudele.
• Pikk DOM-i interaktiivseks muutumise aeg: Viitab ebaefektiivsele JavaScripti koodile või keerulisele DOM-i struktuurile.
• Pikk DOM-i valmimise aeg: Viitab ressursside, nagu pildid, skriptid ja laadilehed, aeglasele laadimisele.

Näide: Esimese baidi aja (TTFB) arvutamine

Aeg esimese baidini (Time to First Byte ehk TTFB) on oluline mõõdik, mis mõõdab aega, mis kulub brauseril esimese andmebaidi kättesaamiseks serverist. Madal TTFB on kiire kasutajakogemuse jaoks hädavajalik.

            
const ttfb = performance.timing.responseStart - performance.timing.navigationStart;
console.log('Aeg esimese baidini (TTFB):', ttfb, 'ms');

            

              
                Copy
              
            
          

Kõrge TTFB võib olla põhjustatud aeglasest serveripoolsest töötlemisest, võrgu latentsusest või probleemidest serveri infrastruktuuriga. Serveri konfiguratsiooni optimeerimine, sisuedastusvõrgu (CDN) kasutamine ja võrgu latentsuse minimeerimine aitavad TTFB-d vähendada.

Resource Timing API: Ressursside laadimisjõudluse mõõtmine

Resource Timing API pakub üksikasjalikku ajastusteavet veebilehe üksikute ressursside, nagu pildid, skriptid, laadilehed ja fondid, laadimise kohta. See võimaldab teil tuvastada, millised ressursid laadivad kõige kauem, ja neid vastavalt optimeerida.

Ressursiaja mõõtmise peamised mõõdikud

• name: Ressursi URL.
• initiatorType: Elemendi tüüp, mis algatas ressursipäringu (nt img, script, link).
• startTime: Ajatempel, millal brauser alustab ressursi toomist.
• redirectStart: Ajatempel, millal ümbersuunamine algab.
• redirectEnd: Ajatempel, millal ümbersuunamine lõpeb.
• fetchStart: Ajatempel, millal brauser alustab ressursi toomist.
• domainLookupStart: Ajatempel, millal domeeninime otsing algab.
• domainLookupEnd: Ajatempel, millal domeeninime otsing lõpeb.
• connectStart: Ajatempel, millal brauser alustab ühenduse loomist serveriga.
• connectEnd: Ajatempel, millal brauser lõpetab ühenduse loomise serveriga.
• secureConnectionStart: Ajatempel, millal brauser alustab turvalise ühenduse kätlust.
• requestStart: Ajatempel, millal brauser alustab ressursi pärimist serverist.
• responseStart: Ajatempel, millal brauser saab kätte vastuse esimese baidi serverist.
• responseEnd: Ajatempel, millal brauser lõpetab vastuse kättesaamise serverist.
• duration: Kogu aeg, mis kulus ressursi laadimiseks.

Juurdepääs ressursiaja andmetele

Ressursiaja andmetele pääseb ligi meetodi performance.getEntriesByType('resource') abil:

            
const resourceTimings = performance.getEntriesByType('resource');

resourceTimings.forEach(resource => {
  console.log('Ressursi nimi:', resource.name);
  console.log('Algataja tüüp:', resource.initiatorType);
  console.log('Kestus:', resource.duration, 'ms');
});

            

              
                Copy
              
            
          

Ressursiaja andmete tõlgendamine

Ressursiaja andmete analüüsimine aitab teil tuvastada aeglaselt laadivaid ressursse ja optimeerida neid kiiremate laadimisaegade saavutamiseks. Näiteks:

• Suured pildid: Optimeerige pilte, tihendades neid ja kasutades sobivaid failivorminguid (nt WebP).
• Optimeerimata skriptid ja laadilehed: Minifitseerige ja tihendage skripte ja laadilehti, et vähendada nende failimahtu.
• Aeglaselt laadivad fondid: Kasutage veebifonte tõhusalt, kasutades alamhulki (subsetting) ja fondi kuvamise omadusi (font-display).
• Kolmandate osapoolte ressursid: Hinnake kolmandate osapoolte ressursside jõudlusmõju ja kaaluge vajadusel alternatiive.

Näide: Aeglaselt laadivate piltide tuvastamine

See näide demonstreerib, kuidas tuvastada aeglaselt laadivaid pilte Resource Timing API abil:

            
const resourceTimings = performance.getEntriesByType('resource');

const slowImages = resourceTimings.filter(resource => resource.initiatorType === 'img' && resource.duration > 500);

if (slowImages.length > 0) {
  console.warn('Tuvastati aeglaselt laadivad pildid:');
  slowImages.forEach(image => {
    console.log('Pildi URL:', image.name);
    console.log('Kestus:', image.duration, 'ms');
  });
}

            

              
                Copy
              
            
          

Kui olete aeglaselt laadivad pildid tuvastanud, saate neid optimeerida, tihendades neid, muutes nende suurust sobivaks ja kasutades laisa laadimise (lazy loading) tehnikaid.

Praktilised näited ja kasutusjuhud

Reaalne stsenaarium: E-kaubanduse veebisaidi optimeerimine

Kujutage ette e-kaubanduse veebisaiti, mis teenindab kliente üle maailma. Navigeerimis- ja ressursiaja andmete analüüsimine toob esile järgmised probleemid:

• Kõrge TTFB Aasia kasutajate jaoks: Viitab aeglasele serveripoolsele töötlemisele või võrgu latentsusele lähteserveri ja Aasia kasutajate vahel.
• Aeglaselt laadivad tootepildid: Pildid ei ole veebi jaoks optimeeritud, mis põhjustab pikki laadimisaegu.
• Optimeerimata JavaScripti failid: JavaScripti failid ei ole minifitseeritud ega tihendatud, mis suurendab failimahtu.

Nende leidude põhjal saab rakendada järgmisi optimeerimisi:

• Rakendage sisuedastusvõrk (CDN): Jaotage veebisaidi sisu globaalselt mitme serveri vahel, et vähendada latentsust eri piirkondade kasutajate jaoks.
• Optimeerige tootepildid: Tihendage pilte tööriistadega nagu ImageOptim või TinyPNG ja kasutage sobivaid failivorminguid nagu WebP.
• Minifitseerige ja tihendage JavaScripti failid: Kasutage JavaScripti failide minifitseerimiseks tööriistu nagu UglifyJS või Terser ning nende tihendamiseks Gzip või Brotli.
• Kasutage piltide laiska laadimist: Rakendage laisk laadimine ekraanivaatest allpool olevatele piltidele, et parandada lehe esialgset laadimisaega.

Pärast nende optimeerimiste rakendamist paraneb veebisaidi jõudlus märkimisväärselt, mis toob kaasa parema kasutajakogemuse, kõrgemad konversioonimäärad ja paremad SEO-positsioonid.

Mobiilijõudluse optimeerimine

Mobiilikasutajad kogevad sageli aeglasemaid võrguühendusi kui lauaarvuti kasutajad. Mobiilijõudluse optimeerimine on sujuva kasutajakogemuse pakkumiseks mobiilseadmetes ülioluline.

Siin on mõned mobiilispetsiifilised optimeerimistehnikad:

• Kasutage reageerivaid pilte (responsive images): Pakkuge erineva suurusega pilte vastavalt seadme ekraanisuurusele, et vähendada võrgu kaudu edastatavate andmete hulka.
• Optimeerige puutetundlikkusele: Veenduge, et nupud ja lingid oleksid piisavalt suured ja piisava vahega, et neid oleks puuteseadmetel lihtne puudutada.
• Minimeerige HTTP-päringuid: Vähendage HTTP-päringute arvu, kombineerides CSS- ja JavaScripti-faile, lisades kriitilise CSS-i otse HTML-i (inlining) ja kasutades CSS-spraite.
• Eelistage ekraanivaates olevat sisu: Laadige esmalt ekraanil nähtav sisu, et parandada veebisaidi tajutavat jõudlust.

Navigeerimis- ja ressursiaja mõõtmisest kaugemale: Teiste jõudluse API-de uurimine

Kuigi navigeerimis- ja ressursiaja mõõtmine on olulised, pakub Frontend Performance API hulgaliselt muid tööriistu põhjalikuks jõudlusanalüüsiks:

• User Timing API: Võimaldab teil määratleda kohandatud jõudlusmõõdikuid ja mõõta aega, mis kulub konkreetsete sündmuste toimumiseks teie rakenduses.
• Long Tasks API: Aitab teil tuvastada pikalt kestvaid ülesandeid, mis blokeerivad põhilõime ja mõjutavad teie rakenduse reageerimisvõimet.
• Paint Timing API: Pakub lehe renderdamisega seotud mõõdikuid, nagu First Paint (FP) ja First Contentful Paint (FCP).
• Largest Contentful Paint (LCP): Mõõdab aega, mis kulub vaateakna suurima sisuelemendi nähtavaks muutumiseks.
• Cumulative Layout Shift (CLS): Mõõdab ootamatute paigutuse nihete hulka, mis toimuvad lehe laadimise ajal.
• Event Timing API: Pakub üksikasjalikku ajastusteavet kasutaja interaktsioonide kohta lehel, nagu kliki- ja klahvivajutussündmused.

Tööriistad jõudlusandmete analüüsimiseks

Mitmed tööriistad aitavad teil analüüsida navigeerimis- ja ressursiaja andmeid ning tuvastada jõudluse kitsaskohti:

• Brauseri arendajate tööriistad: Enamik kaasaegseid brausereid pakub sisseehitatud arendajate tööriistu, mis võimaldavad teil uurida navigeerimis- ja ressursiaja andmeid, analüüsida võrgupäringuid ja profileerida JavaScripti koodi.
• WebPageTest: Tasuta veebitööriist, mis võimaldab teil testida oma veebisaidi jõudlust erinevatest asukohtadest ja brauseritest.
• Lighthouse: Avatud lähtekoodiga automatiseeritud tööriist veebilehtede kvaliteedi parandamiseks. See sisaldab auditeid jõudluse, ligipääsetavuse, progressiivsete veebirakenduste, SEO ja muu kohta.
• Google PageSpeed Insights: Tasuta veebitööriist, mis analüüsib teie veebisaidi jõudlust ja annab soovitusi selle parandamiseks.
• New Relic, Datadog ja muud APM-tööriistad: Pakuvad üksikasjalikke jõudluse jälgimise ja analüüsi võimalusi veebirakendustele.

Veebijõudluse optimeerimise parimad tavad

Siin on mõned üldised veebijõudluse optimeerimise parimad tavad:

• Minimeerige HTTP-päringuid: Vähendage HTTP-päringute arvu, kombineerides CSS- ja JavaScripti-faile, kasutades CSS-spraite ja lisades kriitilise CSS-i otse HTML-i.
• Kasutage sisuedastusvõrku (CDN): Jaotage oma veebisaidi sisu globaalselt mitme serveri vahel, et vähendada latentsust eri piirkondade kasutajate jaoks.
• Optimeerige pilte: Tihendage pilte, kasutage sobivaid failivorminguid (nt WebP) ja kasutage reageerivaid pilte.
• Minifitseerige ja tihendage CSS-i ja JavaScripti: Vähendage CSS- ja JavaScripti-failide mahtu, neid minifitseerides ja tihendades.
• Kasutage brauseri vahemälu: Konfigureerige oma server seadistama sobivaid vahemälu päiseid, et brauserid saaksid staatilisi ressursse vahemällu salvestada.
• Optimeerige veebifonte: Kasutage fondi alamhulki, fondi kuvamise omadusi ja majutage fonte oma domeenil.
• Lükake mittekriitiliste ressursside laadimine edasi: Kasutage laiska laadimist ekraanivaatest allpool olevate piltide jaoks ja lükake edasi mittekriitiliste JavaScripti-failide laadimine.
• Jälgige jõudlust regulaarselt: Jälgige pidevalt oma veebisaidi jõudlust Frontend Performance API ja muude tööriistade abil, et tuvastada ja lahendada jõudlusprobleeme ennetavalt.

Kokkuvõte

Frontend Performance API, eriti navigeerimis- ja ressursiaja mõõtmise API-d, pakub hindamatut teavet teie veebisaidi jõudluse kohta. Nende API-de mõistmise ja kasutamisega saate tuvastada jõudluse kitsaskohti, optimeerida oma veebisaiti kiiremate laadimisaegade saavutamiseks ja lõppkokkuvõttes pakkuda paremat kasutajakogemust oma globaalsele publikule. Ärge unustage pidevalt jälgida oma veebisaidi jõudlust ja kohandada oma optimeerimisstrateegiaid vastavalt vajadusele, et püsida konkurentsis ja tagada kiire, reageeriv ning kaasahaarav veebikogemus.